<template>
  <div class="pagination-component">
    <!-- 使用Element Plus的el-table -->
    <el-table
        :data="currentPageData"
        border
        stripe
        class="data-table"
        @row-click="handleItemClick"
    >
      <el-table-column
          v-for="(column, index) in columns"
          :key="index"
          :prop="column.prop"
          :label="column.label"
          :width="column.width"
      />
    </el-table>

    <!-- 分页控件 -->
    <el-pagination
        @current-change="handlePageClick"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="prev, pager, next"
        :total="total"
        class="pagination-control"
    />
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits, ref } from 'vue';
import { ElTable, ElTableColumn, ElPagination } from 'element-plus';

// 定义列配置的类型
interface Column {
  prop: string;    // 数据字段名
  label: string;   // 列标题
  width?: number | string;  // 列宽度，可选
}

// 定义数据项的类型
type Item = Record<string, any>;

// 入参定义
const props = defineProps<{
  total: number;           // 总条数
  pageSize: number;        // 每页条数
  currentPageData: Item[]; // 当前页数据
  columns: Column[];       // 列配置
}>();

// 出参事件
const emit = defineEmits<{
  (e: 'item-click', item: Item, column: any, event: Event): void;  // 点击每条数据事件
  (e: 'page-click', currentPage: number): void;                    // 点击当前页事件
}>();

// 当前页码状态
const currentPage = ref(1);

// 处理数据行点击（el-table的row-click事件返回参数更多）
const handleItemClick = (row: Item, column: any, event: Event) => {
  emit('item-click', row, column, event);
};

// 处理页码点击
const handlePageClick = (page: number) => {
  currentPage.value = page;
  emit('page-click', page);
};
</script>

<style scoped>
.pagination-component {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.data-table {
  margin-bottom: 20px;
}

.pagination-control {
  text-align: right;
  padding-top: 10px;
}
</style>
